import {Accelerator} from 'acceleratorkunn'
import { useEffect, useRef } from 'react'
import "./index.less"

const Acceler = () => {
    const ref1 = useRef<HTMLDivElement>(null)
    const ref2 = useRef<HTMLDivElement>(null)

    useEffect(() => {
        new Accelerator(ref1.current,{
            x:0,
            y:80
        })
        new Accelerator(ref2.current,{
            x:220,
            y:80
        })
        return () => {
            Accelerator.destroyAll()
        }
    },[])

    return (
        <div className="acceler-father">
            <p>支持上下左右键盘移动</p>
            <p>支持鼠标左键框选</p>
            <div ref={ref1} className="drag-box">这个元素可以拖拽,缩放</div>
            <div ref={ref2} className="drag-box">这个元素也可以拖拽,缩放</div>
        </div>
    )
}

export default Acceler